<template>
  <div class="body">
    <div class="loginK">
      <div class="rt">
        <div class="r">Roam</div>
        <div class="t">Touring</div>
      </div>
      <div class="yml" v-if="a == 1">
        <div class="yzm">验证码登录</div>
        <el-input v-model="email" placeholder="请输入邮箱"></el-input>
        <el-input v-model="code" placeholder="验证码">
          <template v-slot:append>
            <div class="hq" @click="startCountdown">获取验证码</div>
            <div class="countDown" id="countDown">60</div>
          </template>
        </el-input>
        <div class="dz" @click="lrg">登录/注册</div>
        <div class="jw" @click="a = 2">使用账号密码登录</div>
      </div>
      <div class="zml" v-if="a == 2">
        <div class="yzm">密码登录</div>
        <el-input v-model="email" placeholder="请输入邮箱"></el-input>
        <el-input v-model="password" placeholder="请输入密码" show-password>
        </el-input>
        <div class="dz dz1" @click="login">登录</div>
        <div class="jw" @click="a = 1">使用验证码登录/注册</div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      a: 1,
      email: "",
      password: "",
      code: "",
    };
  },
  methods: {
    login() {
      if (this.email == "" || this.password == "") {
        this.$message({
          showClose: true,
          message: "邮箱和密码不能为空哦~",
        });
      } else {
        let _this = this;
        const axios = require("axios");
        let data = JSON.stringify({
          "email": _this.email,
          "password": _this.password,
        });
        let config = {
          method: "post",
          maxBodyLength: Infinity,
          url: "http://8.134.215.31:11112/login/get",
          headers: {
            "Content-Type": "application/json",
          },
          data: data,
        };
        axios
          .request(config)
          .then((response) => {
            if (response.data.code == 1) {
              _this.setJWTandCookie("JWT_TOKEN", response.data.data.token)
              _this.$router.push(`/home/homePage/${response.data.data.userID}`);
              _this.$message({
                message: response.data.msg,
                type: "success",
              });
            } else this.$message.error(response.data.msg);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    setJWTandCookie(key, value) {
      localStorage.setItem(key, value);
      this.setCookie(key, value)//存储localStorage的同时，也存储一个cookie来监听
    },
    //设置cookie    
    setCookie(name, value, seconds) {
      seconds = seconds || 0;   //seconds有值就直接赋值，没有为0    
      var expires = "";
      if (seconds != 0) {      //设置cookie生存时间    
        var date = new Date();
        date.setTime(date.getTime() + (seconds * 1000));
        expires = "; expires=" + date.toGMTString();
      }
      document.cookie = name + "=" + escape(value) + expires + "; path=/";   //转码并赋值    
    },
    startCountdown() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "email": _this.email,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/regist/post",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          if (response.data.code == 1) {
            _this.$message({
              message: "验证码已发送",
              type: "success",
            });
          } else this.$message.error(response.data.msg);
        })
        .catch((error) => {
          console.log(error);
        });
      var countdownElement = document.getElementById("countDown");
      var hqElement = document.querySelector(".hq");
      hqElement.style.display = "none";
      countdownElement.style.display = "block";
      var seconds = 60;
      var countdownInterval = setInterval(function () {
        seconds--;
        countdownElement.textContent = seconds + "秒";
        if (seconds <= 0) {
          clearInterval(countdownInterval);
          countdownElement.style.display = "none";
          hqElement.style.display = "block";
        }
      }, 1000);
      countdownElement.textContent = 60 + "秒";
    },
    lrg() {
      if (this.email == "" || this.code == "") {
        this.$message({
          showClose: true,
          message: "邮箱和验证码不能为空哦~",
        });
      }
      else {
        let _this = this;
        const axios = require("axios");
        let data = JSON.stringify({
          "email": _this.email,
          "code": _this.code,
        });
        let config = {
          method: "post",
          maxBodyLength: Infinity,
          url: "http://8.134.215.31:11112/regist/get",
          headers: {
            "Content-Type": "application/json",
          },
          data: data,
        };
        axios
          .request(config)
          .then((response) => {
            if (response.data.code == 1) {
              _this.setJWTandCookie("JWT_TOKEN", response.data.data.token)
              _this.$router.push(`/home/homePage/${response.data.data.userID}`);
              _this.$message({
                message: response.data.msg,
                type: "success",
              });
            } else this.$message.error(response.data.msg);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>
<style scoped>
.body {
  user-select: none;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 1000px;
  background-color: pink;
}

.loginK {
  overflow: hidden;
  margin: 100px auto;
  width: 25%;
  height: 450px;
  background-color: white;
  border: 1px black solid;
  border-radius: 20px;
}

.rt {
  position: relative;
  width: 100%;
  height: 15%;
  background-color: rgba(74, 82, 89);
  line-height: 67.5px;
  font-size: 27px;
}

.r {
  position: absolute;
  left: 5%;
  top: 0%;
  width: 25%;
  height: 100%;
  color: pink;
  text-align: end;
}

.t {
  position: absolute;
  left: 30%;
  top: 0%;
  width: 30%;
  height: 100%;
  color: white;
  text-align: start;
}

.yml {
  position: relative;
  overflow: hidden;
  height: 85%;
  width: 80%;
  margin: 0 auto;
}

.zml {
  overflow: hidden;
  height: 85%;
  width: 80%;
  margin: 0 auto;
}

.yzm {
  margin: 15px 0;
  width: 100%;
  height: 15%;
  line-height: 68px;
  font-size: 20px;
  color: rgba(74, 82, 89);
}

.el-input {
  height: 15%;
  margin: 10px 0;
}

::v-deep .el-input__inner {
  height: 100%;
  background-color: rgba(74, 82, 89) !important;
  color: white !important;
  font-size: 20px;
}

::v-deep .el-input__inner:focus {
  border-color: transparent;
}

::v-deep .el-input-group__append {
  background-color: rgba(74, 82, 89);
  border-left: 0;
}

.hq {
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.hq:hover {
  cursor: pointer;
  color: white;
}

.countDown {
  display: none;
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}

.countDown:hover {
  cursor: pointer;
}

.dz {
  margin: 30px 0;
  width: 100%;
  height: 12%;
  color: pink;
  text-align: center;
  background-color: rgba(74, 82, 89);
  line-height: 46px;
  border-radius: 10px;
}

.dz:hover {
  cursor: pointer;
  background-color: rgba(74, 82, 89, 0.8);
}

.dz:active {
  background-color: rgba(74, 82, 89);
}

.jw {
  height: 5%;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: grey;
}

.jw:hover {
  color: black;
  cursor: pointer;
}

.jw:active {
  color: grey;
}

.dz1 {
  font-size: 20px;
}
</style>